<script setup lang="ts">
defineOptions({
  name: "scrolltableCard"
});
import { ref, onMounted, computed, nextTick } from "vue";

interface Props {
  tableData?: any[];
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  title 栏右侧文字 */
  rightText?: string;
  /**  模块最低宽度，默认 257px */
  width?: number;
  /**  模块最低高度，默认 292px */
  height?: number;
  /**  空数据展示图片尺寸 */
  imageSize?: number;
  /**  表格数据 */
  dataList?: any[];
  /**  表格列 */
  tableColumns?: any[];
}

interface Emits {
  (event: "request-data"): void;
}

const emits = defineEmits<Emits>();

const props = withDefaults(defineProps<Props>(), {
  width: 350,
  height: 292,
  imageSize: 80
});

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "color-row";
  }
  return "common-row";
};

onMounted(async () => {
  await nextTick();
  emits("request-data");
});

const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);
</script>

<template>
  <div>
    <div class="table-card">
      <px-scrollbar>
        <px-table class="table-card-table table-card-con" :data="dataList" :row-class-name="tableRowClassName">
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item?.minWidth"
            :width="`${item?.width}`"
            :align="`${item?.align}`"
            :show-overflow-tooltip="item.showOverflowTooltip || true"
            :fixed="item?.fixed"
            :type="`${item?.type}`"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
          <template #empty>
            <px-empty :image-size="imageSize" />
          </template>
        </px-table>
      </px-scrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table-card {
  // box-sizing: border-box;
  width: 100%;
  // min-width: v-bind(min_width);
  // height: 100%;
  // min-height: v-bind(min_height);
  max-height: 200px;
  overflow: hidden;

  .table-card-con {
    width: 100%;
    // height: calc(v-bind(min_height) - 32px);
  }

  /** 删除表格所有边框线 */
  .table-card-table :deep(.px-table__header th) {
    border-bottom: none;
  }

  .table-card-table :deep(.px-table__row > td) {
    border: none;
  }

  .table-card-table :deep(.px-table th.px-table__cell.is-leaf) {
    border-bottom: none;
  }

  .table-card-table :deep(.px-table__inner-wrapper::before) {
    height: 0;
  }

  /** 改变表格斑马纹颜色 */
  .table-card-table :deep(.color-row) {
    height: 41px;
    background: #e7eefb;
  }

  .table-card-table :deep(.common-row) {
    height: 41px;
  }
}
</style>
